<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-menu default-active="1" mode="horizontal" @select="selectTopMenu">
          <el-menu-item index="1"
            ><i class="el-icon-s-home"></i> <span>主页</span></el-menu-item
          >
          <!-- <el-menu-item index="2">公开课</el-menu-item> -->
          <!-- 链接到智云课堂 -->
          <el-menu-item index="3">课程回放</el-menu-item>
          <el-menu-item index="4">教务网</el-menu-item>
        </el-menu>
      </el-col>
      <!-- <el-col :span="6">
        <el-input v-model="input" placeholder="请输入搜索课程"></el-input>
      </el-col>
      <el-col :span="1">
        <el-button type="primary" icon="el-icon-search"></el-button>
      </el-col> -->
    </el-row>
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    next(); // 必须执行next(),否则页面不会跳转
  },
  data() {
    return {
      input: "",
    };
  },
  methods: {
    selectTopMenu(key, keyPath) {
      //   console.log(this.top_index);
      switch (key) {
        case "3":
          console.log(3);
          window.open("http://classroom.zju.edu.cn/", "_blank");
          this.top_index = "1";
          break;
        case "4":
          console.log(4);
          window.open("http://jwbinfosys.zju.edu.cn/", "_blank");
        default:
          console.log(key);
          break;
      }
    },
  },
};
</script>

<style scoped>
</style>
